<template>
    <!-- 当前页数-1 乘以 显示条数   当前页数乘以显示条数 -->
    <el-table :data="filterTableData.slice((currentPage4 - 1) * pageSize4,currentPage4 * pageSize4)" style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="title" label="楼盘名称" />
        <el-table-column prop="type" label="房源类型" />
        <el-table-column prop="num" label="门牌号" />
        <el-table-column prop="hometype" label="房源户型" />
        <el-table-column prop="name" label="户主" />
     <!-- 输入框 -->
     <el-table-column align="right">
        <template #header> 
            <el-input v-model="search" size="small" placeholder="Type to search" />
        </template>
     </el-table-column>
     <!-- 添加删除和修改按钮 -->
     <el-table-column label="操作">        
        <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index,scope.row)">
                Edit
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">
                Delete
            </el-button>
        </template>
     </el-table-column>
     
    </el-table>
    <!-- 导航 -->
    <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="filterTableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
    />
    <Up @get-list="getTableList"></Up>
</template>
<script lang="ts" setup>
    import {ref,computed,onMounted} from "vue"
    import { useStore } from "vuex";
    import Up from '../../components/UpdateDialog.vue'
    import link from '../../api/link.js'
    import { ElMessage, ElMessageBox } from 'element-plus'

    const store = useStore()
    // 参数和方法
    const currentPage4 = ref(1)
    const pageSize4 = ref(10)
    const search = ref('')

    //表格数据
    const userList = ref([])

    onMounted(() => {
        getTableList()
    })

    //获取住户信息
    const getTableList = () => {
        link('/userlist').then((res) => {
            console.log(res);
            if (res.data.length) {
                ElMessage({
                    message: '信息获取成功！'
                })
                userList.value = res.data
            } else {
                ElMessage({
                    message: '信息获取失败！'
                })
            }
        })
    }

    const filterTableData = computed(() => {
        return userList.value.filter((item:any) => item.name.toLowerCase().includes(search.value.toLowerCase()))
    })
    const handleSizeChange = (val: number) => {
        // 一页显示多少条
        pageSize4.value = val
    }
    const handleCurrentChange = (val: number) => {
        // 页码更改
        currentPage4.value = val
    }
    // 删除和修改方法
    interface User {
        date:string;
        name:string;
        address:string;
    }
    const handleEdit = (index:number,row:User) => {
        console.log(index,row);
        store.commit('SET_DIALOG')
        store.commit('changePerDialog')
        store.commit('showPerEdit',row)
    }
    const handleDelete = (index:number,row:User) => {
        ElMessageBox.confirm(
            '确认删除该信息吗?',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                http(`/userlist/${row.id}`, 'delete').then(res => {
                    if (res.status === 200) {
                        ElMessage({
                            message: '删除成功！',
                        })
                        getTableList()
                    } else {
                        ElMessage({
                            message: '删除失败！',
                        })
                    }
                })
            }).catch(() => {
                ElMessage({
                    message: '已取消！',
                })
        })
    }
</script>
<style></style>